<template>
	<u-popup v-model="confirmModalRef" mode="bottom" border-radius="10">
		<view class="modal-body">
			<view class="title-container">
				<view class="title">{{i18n.verification}}</view>
			</view>
			<view class="table-container" v-if="mobileShow && emailShow">
				<view class="label">{{ userInfo.mobile_hide }}</view>
				<view :class="['input-container', phoneFocus? 'on': '']">
					<input type="number" :maxlength="6" :placeholder="i18n.smsCode" v-model="phoneCode"
					 @focus="phoneFocus = true" @blur="phoneFocus = false" />
					<verificationCode ref="phoneCodeRef" @send="sendPhoneCode" />
				</view>
			</view>
			<view class="table-container" v-if="!mobileShow && emailShow">
				<view class="label">{{ userInfo.mobile_hide }}</view>
				<view :class="['input-container', phoneFocus? 'on': '']">
					<input type="number" :maxlength="6" :placeholder="i18n.smsCode" v-model="phoneCode"
					 @focus="phoneFocus = true" @blur="phoneFocus = false" />
					<verificationCode ref="phoneCodeRef" @send="sendPhoneCode" />
				</view>
			</view>
			<view class="table-container" v-if="mobileShow && emailShow">
				<view class="label">{{ userInfo.email_hide }}</view>
				<view :class="['input-container', emailFocus? 'on': '']">
					<input type="number" :maxlength="6" :placeholder="i18n.emailCode" v-model="emailCode"
					 @focus="emailFocus = true" @blur="emailFocus = false" />
					<verificationCode ref="emailCodeRef" @send="sendEmailCode" />
				</view>
			</view>
			<view class="table-container" v-if="mobileShow && !emailShow">
				<view class="label">{{ userInfo.email_hide }}</view>
				<view :class="['input-container', emailFocus? 'on': '']">
					<input type="number" :maxlength="6" :placeholder="i18n.emailCode" v-model="emailCode"
					 @focus="emailFocus = true" @blur="emailFocus = false" />
					<verificationCode ref="emailCodeRef" @send="sendEmailCode" />
				</view>
			</view>
			<view class="table-container" v-if="googleShow">
				<view :class="['input-container', googleFocus? 'on': '']">
					<input type="number" :placeholder="i18n.googleCode" v-model="googleCode" @focus="googleFocus = true"
					 @blur="googleFocus = false" />
				</view>
			</view>
			<button class="btn-block" hover-class="btn-hover" style="margin: 60upx 30upx;" @click="handleAffirm">{{i18n.tit5}}</button>
		</view>
	</u-popup>
</template>

<script>
	import verificationCode from '@/components/verificationCode.vue';
	export default {
		components: {
			verificationCode
		},
		props: {
			requestUrl: { //发送验证码请求地址
				type: String,
				required: true
			},
			userInfo: { //用户信息
				type: Object,
				required: true
			},
			/* 
				type 是具体类型
				绑定/开关 邮箱: switch_email
				绑定/开关 谷歌: switch_ga
				绑定/开关 手机: switch_mobile
				修改资金密码: payment
				修改登录密码: login
				提币: withdraw
			 */
			type: {		
				type: String,
				default: ''
			}
		},
		mounted() {
			// this.showStatus()
			//console.log(this.type)
		},
		data() {
			return {
				phoneCode: '',
				emailCode: '',
				googleCode: '',
				phoneFocus: false,
				emailFocus: false,
				googleFocus: false,
				mobileShow: false,
				emailShow: false,
				googleShow: false,
				confirmModalRef: false
			}
		},
		watch: {
			userInfo(value) {
				//console.log(value)
				const {
					email,
					email_open,
					ga_bind,
					ga_open,
					mobile,
					mobile_open
				} = value
				const type = this.type
				this.emailShow = !!email_open
				this.googleShow = !!ga_open
				this.mobileShow = !!mobile_open
				
				if (type === 'email' && email && !email_open) { //极端情况下，当开始邮箱验证时
					this.emailShow = true
				}else if (type === 'mobile' && mobile && !mobile_open) {
					this.mobileShow = true
				}else if (type === 'google' && ga_bind && !ga_open) {
					this.googleShow = true
				}
			}
		},
		computed:{
			i18n() {
				return this.$t('components');
			}
		},
		methods: {
			showStatus() {
				const {
					email,
					email_open,
					ga_bind,
					ga_open,
					mobile,
					mobile_open
				} = this.userInfo
				const type = this.type
				this.emailShow = !!email_open
				this.googleShow = !!ga_open
				this.mobileShow = !!mobile_open
				
				if (type === 'email' && email && !email_open) { //极端情况下，当开始邮箱验证时
					this.emailShow = true
				}else if (type === 'mobile' && mobile && !mobile_open) {
					this.mobileShow = true
				}else if (type === 'google' && ga_bind && !ga_open) {
					this.googleShow = true
				}
			},
			show() {
				this.confirmModalRef = true
			},
			close() {
				if (this.$refs.emailCodeRef) {
					this.$refs.emailCodeRef.reset()
				}
				if (this.$refs.phoneCodeRef) {
					this.$refs.phoneCodeRef.reset()
				}
				this.confirmModalRef = false
				this.phoneCode = ''
				this.emailCode = ''
				this.googleCode = ''
			},
			sendPhoneCode() {
				this.$refs.phoneCodeRef.startRequest()
				let requestData = {account_type: 'mobile'}
				const verifyTypes = ['switch_email', 'switch_mobile', 'switch_ga']
				requestData.verify_type = this.type
				// if (verifyTypes.indexOf(this.type) != -1 ) {
				// 	requestData.verify_type = verifyTypes
				// } else {
				// 	requestData.type = this.type
				// }
				
				this.$post(this.requestUrl, requestData)
					.then(res => {
						this.$toast(res.msg)
						this.$refs.phoneCodeRef.sendEnd('success')
					})
					.catch(err => {
						this.$refs.phoneCodeRef.sendEnd('error')
					})
			},
			sendEmailCode() {
				this.$refs.emailCodeRef.startRequest()
				let requestData = {account_type: 'email'}
				const verifyTypes = ['switch_email', 'switch_mobile', 'switch_ga']
				requestData.verify_type = this.type
				// if (verifyTypes.indexOf(this.type) != -1 ) {
				// 	requestData.verify_type = verifyTypes
				// } else {
				// 	requestData.type = this.type
				// }
				this.$post(this.requestUrl, requestData)
					.then(res => {
						this.$toast(res.msg)
						this.$refs.emailCodeRef.sendEnd('success')
					})
					.catch(err => {
						this.$refs.emailCodeRef.sendEnd('error')
						
					})
			},
			handleAffirm() {
				const {
					phoneCode,
					emailCode,
					googleCode,
					userInfo,
					mobileShow,
					emailShow,
					googleShow
				} = this
				const {
					mobile_open,
					email_open,
					ga_open
				} = userInfo
				
				// if (mobile_open && !phoneCode && mobileShow) return this.$toast(this.$t('code.tit2'))
				// if (email_open && !emailCode && emailShow) return this.$toast(this.$t('code.tit3'))
				// if (ga_open && !googleCode && googleShow) return this.$toast(this.$t('code.tit4'))
				this.close()
				let data = {
					mobile_code: phoneCode,
					email_code: emailCode,
					ga_code: googleCode
				}
				this.$emit('affirm', data)
			}
		}
	}
</script>

<style scoped lang="less">
	.modal-body {
		background-color: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		.title-container {
			padding: 30upx;
			border-bottom: 1upx solid var(--border2);
		}

		.title {
			font-size: 32upx;
		}

		.title-des {
			font-size: 26upx;
			color: #b4b4b4;
		}

		.input-des {
			font-size: 20upx;
			color: #ff4958;
			margin-top: 20upx;
		}

		.input-container {
			display: flex;
			align-items: center;
			height: 70upx;
			border-bottom: 1upx solid var(--border2);
			padding-bottom: 20upx;

			.unit {
				font-size: 22upx;
				color: var(--txt-gray-color);
			}

			input {
				font-size: 26upx;
				flex: 1;
			}
		}

		.input-container.on {
			border-bottom: 1upx solid var(--theme-color);
		}

		.label {
			font-size: 26upx;
			color: var(--txt-gray-color);
			margin-bottom: 20upx;
		}

		.table-container {
			margin-top: 50upx;
			padding-left: 30upx;
			padding-right: 30upx;
		}
	}
</style>
